<template>
  <div class="home">
    <keep-alive include="find">
      <!-- v-if与v-show
      v-if:控制组件是否渲染
      v-show:已渲染,只是控制是否显示      
       -->
      <router-view></router-view>
    </keep-alive>
    <!-- 路由模式
       1:在van-tabbar  route:boolean  true:路由模式  false普通默认模式
       2:在van-tabbar-item to="路由跳转地址"
    注意点:使用了路由模式,v-model无用了
    标签栏
       van-tabbar
           v-model:值(对应选中项的索引)
           active-color:选中后的颜色 
           inactive-color:没选中时颜色
           route route:boolean  true:路由模式  false普通默认模式
           placeholder true:生成等高占位符  默认是false
        van-tabbar-item
           icon:图标(vant自带图标)
           to:路由模式下点击后的跳转地址
           slot="default/icon"
     -->
    <!-- 
      单元素动画
      条件:进入和离开动作
        1:用transition包住
        2:它身上有一个name属性
          name的值就是后面css的前缀  name="xxx"
        .xxx-enter-active:进入动画执行体
        .xxx-leave-active:离开动画执行体
     进入时状态   正常状态      离开时状态
        .xxx-enter:进入时状态状态  从什么状态变到正常状态
        .xxx-leave-to:离开时状态   离开时,从正常状态变到什么状态
      -->
    <transition name="xxx">
      <van-tabbar
        class="tabbar"
        active-color="#E40137"
        inactive-color="#B4B4BD"
        :route="true"
        placeholder
        v-if="$route.meta.needTab"
      >
        <van-tabbar-item to="/home/company">
          <span>公司</span>
          <template #icon>
            <i class="iconfont f28">&#xe63b;</i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/question">
          <span>刷题</span>
          <template #icon>
            <i class="iconfont f28">&#xe642;</i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/find">
          <span>发现</span>
          <template #icon>
            <i class="iconfont f28">&#xe63a;</i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/my">
          <span>我的</span>
          <template #icon>
            <i class="iconfont f28">&#xe645;</i>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </transition>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style lang="less" scoped>
.home {
  height: 100%;
  .f28 {
    font-size: 28px;
  }
  .tabbar {
    height: 60px;
  }
  .xxx-enter-active {
    transition: all 2s;
  }
  .xxx-leave-active {
    transition: all 2s;
  }
  .xxx-enter {
    opacity: 0;
  }
  .xxx-leave-to {
    opacity: 0;
  }
}
</style>
